import QtQuick 2.1
import CppComponents 1.0

import "../constants.js" as Constants
import "../Components" as MyComponents


Item {
    id: stopwatch
    width: Constants.PageWidth
    height: Constants.PageHeight

    property real radius: Math.min(stopwatch.width, stopwatch.height)*0.8/2

    property int minutes: 0
    property int seconds: 0
    property int time: control.phi*control.rad2sec
    property int buttonsHeight: height*0.1
    property int buttonsWidth: width/2

    property color controlColor: "#F2F2F2"
    Rectangle{
        id: ring

        anchors{
            horizontalCenter: parent.horizontalCenter
            bottom: parent.bottom
            bottomMargin: buttonsHeight+handler.height/2
        }

        width:stopwatch.radius*2
        height: stopwatch.radius*2

        radius: stopwatch.radius
        color: "transparent"
        border{
            width: stopwatch.radius*0.1;
            color: controlColor
        }
    }

    Item{
        id: control
        width: ring.width
        height: ring.height

        anchors.centerIn: ring

        property real centerX: width/2;
        property real centerY: height/2;
        property real phi:0
        property real rad2sec: 30/Math.PI

        rotation: rad2grad (phi)

        function angle (x,y){
            var shiftX = x-centerX;
            var shiftY = y-centerY

            if(shiftX ==0 && shiftY>0)
                return Math.PI/2;
            if(shiftX ==0 && shiftY<0)
                return Math.PI/2;
            if(shiftX == 0 && shiftY ==0)
                return 0;
            if(shiftX>0){
                if(shiftY>=0)
                    return Math.atan(shiftY/shiftX);
                else
                    return Math.atan(shiftY/shiftX)+Math.PI*2;
            }else
                return Math.atan(shiftY/shiftX)+Math.PI;
        }

        function rad2grad(phi){
            return phi*180/Math.PI;
        }


        function updateTime(){
            var all = Math.round(control.phi*control.rad2sec);
            stopwatch.minutes = Math.floor(all/60);
            stopwatch.seconds = all%60;
        }

        Item{
            id:handler

            x:parent.width/2-width/2
            y:-height/2+ring.border.width/2

            height: stopwatch.radius*0.5
            width: stopwatch.radius*0.5

            property real circleWidth:stopwatch.radius*0.05
            property real shift:handler.circleWidth*3

            Repeater {
                model: 3
                Rectangle {
                    anchors.centerIn: parent
                    width: handler.width-index*handler.shift
                    height: handler.height-index*handler.shift
                    radius: handler.height-index*handler.shift
                    border{
                        width: handler.circleWidth
                        color: controlColor
                    }
                    color: "transparent"
                }
            }

            Rectangle {
                anchors.centerIn: parent
                width: ring.border.width
                height: ring.border.width
                radius: ring.border.width
                color: Constants.AppBkColor
            }
        }


        MouseArea{
            property bool isMoving:false;

            anchors.fill: parent
            onPressed:{
                if((mouse.x>=handler.x)
                        && (mouse.x<=(handler.x+handler.width))){

                    if(mouse.y>=handler.y
                            && (mouse.y<=(handler.y+handler.height))){
                        isMoving = true;
                    }
                }
            }
            onReleased:{
                isMoving = false;
            }

            onPositionChanged:{
                if(isMoving){
                    var oldAngle = control.angle (handler.x, handler.y);
                    var newAngle = control.angle (mouse.x, mouse.y);

                    control.phi += newAngle-oldAngle
                    if(control.phi<0){
                        control.phi = 0;
                    }
                    control.updateTime ();
                }
            }

        }
    }

    CircleTimeProgress{
        id: progress
        anchors.centerIn: ring
        depth: 1
        step: 5
        clocs: timer.cloc
        period : control.phi*control.rad2sec;
        width: stopwatch.radius*1.3
        height: stopwatch.radius*1.3
        borderColor:Constants.AppBkColor

        Rectangle {
            anchors.centerIn: parent
            width: parent.width*0.75
            height: parent.height*0.75
            radius: Math.min(width,height)
            color: Constants.AppBkColor
        }
    }


    FontLoader{
        source:"../fonts/DS-DIGIT.TTF"
        id: digitFont
    }


    Text{
        id:timerLabel
        anchors.centerIn: ring

        function timeToString(min, sec){
            return min+":" + (sec>9?sec:"0"+sec);
        }

        text: timeToString(minutes, seconds)

        color:"white"

        font{
            family: digitFont.name
            pixelSize: stopwatch.radius*0.4
        }
    }
    Text {
        id: timeLibel

        function timeToString(seconds){
            var min = Math.floor(seconds/60);
            var sec = seconds%60;
            return min+":" + (sec>9?sec:"0"+sec);
        }
        text: timeToString (timer.cloc)
        anchors{
            top: timerLabel.bottom
            horizontalCenter: parent.horizontalCenter
        }

        color:"white"
        font{
            family: digitFont.name
            pixelSize: timerLabel.font.pixelSize*0.5
        }
    }

    Timer{
        id: timer
        property int cloc:0

        interval: 1000
        repeat: true

        onTriggered: {
                ++cloc;
        }
    }


    MyComponents.Button{
        id:startButton
        height:buttonsHeight
        width: buttonsWidth

        text: qsTr("Start")

        onClicked: {
            timer.start()
        }

        anchors {
            left:parent.left
            bottom: parent.bottom
        }
        gradient: Gradient{
            GradientStop { position: 0; color: startButton.pressed ? "#088a00": "#4bf84f" }
            GradientStop { position: 0.33; color: startButton.pressed ? "#088a00":"#1dff1f" }
            GradientStop { position: 0.80; color:startButton.pressed ? "#088a00":"#088a00"}
        }
    }


    MyComponents.Button{
        id:stopButton
        height:buttonsHeight
        width: buttonsWidth

        text: qsTr("Stop")

        onClicked: {
            timer.cloc = 0;
            timer.stop()
        }


        anchors {
            right:parent.right
            bottom: parent.bottom
        }

        gradient: Gradient{
            GradientStop { position: 0; color: stopButton.pressed ? "#8a000a" : "#f84b4c" }
            GradientStop { position: 0.33; color: stopButton.pressed ? "#8a000a" :"#ff211d" }
            GradientStop { position: 0.80; color:stopButton.pressed ? "#8a000a" :"#8a000a"}
        }
    }
}
